import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { Modal, Form, Input, Cascader } from 'antd'
import PropTypes from 'prop-types'

// import Style from './consignee.css'

const { Item } = Form
const { TextArea } = Input

class consigneeModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    areaResList: PropTypes.array,
    getAreaList: PropTypes.func,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    confirmLoading: PropTypes.bool,
    init: PropTypes.object
  }

  constructor (props) {
    super(props)
    this.state = {
      belongArea: '',
      provinceCode: null,
      cityCode: null,
      areaCode: null
    }
  }

  componentDidMount () {
    this.props.getAreaList()
  }

  onChange = (value, selectedOptions) => {
    const belongArea = selectedOptions.map(n => n.areaName).join('')
    let provinceCode = null
    let cityCode = null
    let areaCode = null
    if (value.length === 1) {
      provinceCode = value[0]
    } else if (value.length === 2) {
      provinceCode = value[0]
      cityCode = value[1]
    } else if (value.length === 3) {
      provinceCode = value[0]
      cityCode = value[1]
      areaCode = value[2]
    }
    this.setState({
      belongArea,
      provinceCode,
      cityCode,
      areaCode
    })
  }

  confirmSubmit = () => {
    const { belongArea, provinceCode, cityCode, areaCode } = this.state
    const { form, onOk } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        console.log('consigneeModal -> confirmSubmit -> values', values)
        const { area, ...rest } = values
        onOk({
          ...rest,
          belongArea,
          provinceCode,
          cityCode,
          areaCode
        })
      }
    })
  }

  render () {
    const { visible, onCancel, form, confirmLoading, areaResList, init } = this.props
    const { consigneeName, consigneeMobile, zipCode, areaCode, cityCode, provinceCode, addressDetails } = init
    const initialPosition = provinceCode ? (cityCode ? (areaCode ? [provinceCode, cityCode, areaCode] : [provinceCode, cityCode]) : [provinceCode]) : []
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    }
    return (
      <Modal
        title='修改收货人信息'
        visible={visible}
        onCancel={onCancel}
        confirmLoading={confirmLoading}
        onOk={this.confirmSubmit}
      >
        <Form {...formItemLayout} >
          <Item label='收货人姓名'>
            {getFieldDecorator('consigneeName', {
              rules: [{ required: true, message: '请输入' }],
              initialValue: consigneeName
            })(<Input />)}
          </Item>
          <Item label='收货人手机'>
            {getFieldDecorator('consigneeMobile', {
              rules: [{ required: true, message: '请输入' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }],
              initialValue: consigneeMobile
            })(<Input />)}
          </Item>
          <Item label='邮政编码'>
            {getFieldDecorator('zipCode', {
              rules: [{ required: true, message: '请输入' }],
              initialValue: zipCode
            })(<Input />)}
          </Item>
          <Item label='所在区域'>
            {getFieldDecorator('area', {
              rules: [{ required: true, message: '请输入' }],
              initialValue: initialPosition,
              onChange: this.onChange
            })(<Cascader
              placeholder='请选择'
              fieldNames={{ label: 'areaName', value: 'areaCode', children: 'subList' }}
              options={areaResList}
            />)}
          </Item>
          <Item label='详细地址'>
            {getFieldDecorator('addressDetails', {
              rules: [{ required: true, message: '请输入' }],
              initialValue: addressDetails
            })(<TextArea />)}
          </Item>
          <Item label='修改原因'>
            {getFieldDecorator('changeReason', {
              rules: [{ required: true, message: '请输入' }]
            })(<TextArea />)}
          </Item>
        </Form>
      </Modal>
    )
  }
}

const mapState = state => ({
  areaResList: state.common.areaResList
})
const mapDispatch = dispatch => ({
  getAreaList: dispatch.common.getAreaList
})

export default connect(mapState, mapDispatch)(Form.create()(consigneeModal))
